<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    body{
        background-color: #333;
    }

    .scene{
        width: 600px;
        height: 300px;
        /* border: 1px solid red; */
        margin: 30px auto;
        perspective: 800px;
    }

    .album{
        width: 600px;
        height: 300px;
        /* border: 1px solid red; */
        /* background-color: skyblue; */
        position: relative;
        transform: rotateY(0deg);
        transform-style: preserve-3d;
        animation: rotateAuto 60s linear infinite;
        animation-play-state: running;
        transition: animation-play-state 0.1s ease-in-out;
    }

    .album:hover{
        animation-play-state: paused;
    }

    .album .photo{
        width: 100px;
        height: 100px;
        position: absolute;
        left: 50%;
        margin-left: -50px;
        bottom: 0;
        transform: rotateY(calc((var(--photoid) - 1) * 40deg)) translateZ(300px);
        background-color: yellow;
        transition: transform 0.1s ease-in-out;
    }

    .album .photo img{
        width: 100%;
        height: 100%;
    }

    @keyframes rotateAuto {
        from{
            transform: rotateY(0deg);
        }

        to{
            transform: rotateY(-360deg);
        }
    }
</style>
<body>
    <div class="scene">
        <div class="album">
            <div class="photo photo1" style="--photoid: 1;">
                <img src="/src/img/images/3dmm-01.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 2;">
                <img src="/src/img/images/3dmm-02.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 3;">
                <img src="/src/img/images/3dmm-03.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 4;">
                <img src="/src/img/images/3dmm-04.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 5;">
                <img src="/src/img/images/3dmm-05.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 6;">
                <img src="/src/img/images/3dmm-06.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 7;">
                <img src="/src/img/images/3dmm-07.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 8;">
                <img src="/src/img/images/3dmm-08.webp" alt="">
            </div>

            <div class="photo photo1" style="--photoid: 9;">
                <img src="/src/img/images/3dmm-09.webp" alt="">
            </div>
        </div>
    </div>
</body>
</html>